<template>
  <lay-container>
    <div class="recommendation-title">
      <img src="../img/aix.svg" />猜你喜欢
    </div>

    <!-- 骨架屏加载 -->
    <div v-if="isLoading" class="recomskeleton">
      <div class="lay-skeleton lay-skeleton-article" v-for="index in 30" :key="index">
        <!-- 图片骨架 -->
        <div class="lay-skeleton-img" style="width: 100%"></div>
        <div class="lay-skeleton-text"></div>
        <div class="lay-skeleton-text"></div>
        <div class="lay-skeleton-text" style="width: 60%"></div>
      </div>
    </div>

    <!-- 商品数据渲染 -->
    <div v-else class="commoditybox">
      <div
          v-for="(item, index) in merchandiseList"
          :key="index"
          class="merchandisecards"
          @click="goToProductDetail(item.id,item.merchantId)"
      >
        <img :src="item.imgUrl" class="imgmer" />
        <div
            style="font-weight: bold; font-size: 15px; margin-left: 10px; color: black;"
        >
          {{ item.title }}
        </div>
        <div class="merfon">{{ item.description }}</div>
        <div class="merfon">
          <p style="color: red; font-size: 20px;">¥{{ item.price }}</p>
          {{ item.details }}
        </div>
      </div>
    </div>
  </lay-container>
</template>

<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import { gsap } from "gsap";
import { useRouter } from "vue-router";
import "./Recommend.css";

// 商品数据数组
const merchandiseList = ref([]);
const isLoading = ref(true); // 控制加载状态

// 获取商品数据
const fetchMerchandiseData = async () => {
  try {
    const response = await axios.get(
        "http://localhost:8080/home/homepage"
    ); // 请求商品数据
    console.log("Response Data:", response.data);
    if (response.data.status === 200) {
      merchandiseList.value = response.data.data.map((item) => ({
        id: item.productid,
        merchantId: item.merchantid,
        imgUrl: `${item.imageurl}`, // 确保正确的图片路径
        title: item.productname,
        description: item.description,
        price: item.price,
        details: item.distribution,
      }));
      isLoading.value = false; // 数据加载完成，隐藏骨架屏
    } else {
      console.error("Failed to fetch merchandise data");
      isLoading.value = false; // 即使请求失败也隐藏骨架屏
    }
  } catch (error) {
    console.error("Error fetching data:", error);
    isLoading.value = false; // 即使出错也隐藏骨架屏
  }
};

// 使用 GSAP 和 Intersection Observer 实现滚动动画
onMounted(() => {
  fetchMerchandiseData(); // 获取商品数据

  const cards = document.querySelectorAll(".merchandisecards");

  // 模拟一次滚动触发动画
  window.scrollTo(0, 0); // 将页面滚动到顶部

  const observerOptions = {
    threshold: 0.2, // 可见部分达到 20% 时触发
  };

  const observerCallback = (entries) => {
    entries.forEach((entry, index) => {
      if (entry.isIntersecting) {
        gsap.fromTo(
            entry.target,
            { y: 50, opacity: 0 },
            {
              y: 0,
              opacity: 1,
              duration: 0.8,
              ease: "power3.out",
              delay: index * 0.2, // 延迟使动画一个个触发
            }
        );
        observer.unobserve(entry.target); // 停止观察
      }
    });
  };

  const observer = new IntersectionObserver(observerCallback, observerOptions);

  cards.forEach((card) => observer.observe(card));
});

// 使用 Vue Router 进行页面跳转
const router = useRouter();

const goToProductDetail = (productId,merchantId) => {
  router.push(`/detailed/${productId}/${merchantId}`);
};
</script>
